<template>
  <div class="config-personal">
    <h2 class="title f1">个人预案配置</h2>
    <div class="card c-f" v-loading="loading || submiting" element-loading-background="rgba(0, 0, 0, 0.8)">
      <template v-if="permission">
        <div v-for="item in items" class="card-item" :key="item.statecode">
          <h3 class="f-16">{{item.title}}</h3>
          <div class="fr ac item f-14">
            <div class="label">消息通知</div>
            <div class="fr ac">
              <span class="checkbtn" :class="{ on: item.form && item.form.newsnotifycode.includes('1') }"><span class="a" @click="toggle(item, 'newsnotifycode', '1')">校长</span></span>
              <span class="checkbtn" :class="{ on: item.form && item.form.newsnotifycode.includes('2') }"><span class="a" @click="toggle(item, 'newsnotifycode', '2')">班主任</span></span>
              <span class="checkbtn" :class="{ on: item.form && item.form.newsnotifycode.includes('3') }"><span class="a" @click="toggle(item, 'newsnotifycode', '3')">家长/紧急联系人</span></span>
            </div>
          </div>
          <div class="fr ac item f-14">
            <div class="label">通知方式</div>
            <div class="fr ac">
              <span class="checkbtn" :class="{ on: item.form && item.form.noticemode.includes('1') }"><span class="a" @click="toggle(item, 'noticemode', '1')">手机短信</span></span>
              <span class="checkbtn" :class="{ on: item.form && item.form.noticemode.includes('2') }"><span class="a" @click="toggle(item, 'noticemode', '2')">手机通话</span></span>
            </div>
          </div>
        </div>
        <div class="tc mt-30">
          <el-button type="primary" @click="submit">保存</el-button>
        </div>
      </template>
      <no-right v-else/>
    </div>
  </div>
</template>

<script>
  import moment from '@/utils/moment'

  class Form {
    constructor (statecode, schoolno, item = {}) {
      if (item.did) this.did = item.did
      this.newsnotifycode = item.newsnotifycode ? item.newsnotifycode.split(',') : []
      this.noticemode = item.noticemode ? item.noticemode.split(',') : []
      this.createtime = item.createtime || ''
      this.statecode = item.statecode || statecode
      this.schoolno = item.schoolno || schoolno
    }
  }

  export default {
    name: 'config-personal',
    data () {
      return {
        loading: false,
        submiting: false,
        list: [],
        items: [
          { statecode: '001', title: '留校观察', form: null },
          { statecode: '002', title: '居家隔离', form: null },
          { statecode: '003', title: '医疗隔离', form: null },
          { statecode: '004', title: '复学/复工申请', form: null },
          { statecode: '005', title: '返校复学/复工', form: null },
          { statecode: '006', title: '核酸检测结果', form: null },
          { statecode: '007', title: '疑似风险', form: null }
        ]
      }
    },
    computed: {
      permission () {
        const { roleid } = this.$store.state
        return [1005].includes(roleid)
      }
    },
    methods: {
      getList () {
        let { schoolno } = this.$store.state.classinfo
        schoolno += ''

        this.loading = true
        this.$http('/statedeploy/getmanagelist', { schoolno }).then(
          res => {
            const { data } = res
            this.items.forEach(val => {
              val.form = new Form(val.statecode, schoolno, data.find(v => v.statecode === val.statecode))
            })
            this.loading = false
          }
        )
      },
      toggle ({ form }, key, val) {
        if (form[key].includes(val)) form[key].splice(form[key].indexOf(val), 1)
        else form[key].push(val)
      },
      submit () {
        const data = JSON.parse(JSON.stringify(this.items.map(v => v.form)))
        data.forEach(v => {
          if (!v.createtime) v.createtime = moment().format('YYYY-MM-DD HH:mm:ss')
          v.newsnotifycode = v.newsnotifycode.sort().join(',')
          v.noticemode = v.noticemode.sort().join(',')
        })
        this.submiting = true
        this.$http('/statedeploy/saveorupdate', data).then(
          res => {
            this.$notify({
              title: '成功',
              message: res.message,
              type: 'success'
            })
            this.submiting = false
          }
        )
      }
    },
    created () {
      if (!this.permission) return
      this.getList()
    }
  }
</script>

<style lang="less">
.config-personal{
  .item {color: rgba(255, 255, 255, .8);}
  .card-item + .card-item {margin-top: 20px;border-top: 1px solid rgba(255, 255, 255, .2);}
  h3, .item {padding: 12px 0;}
  .label {width: 150px;}
  .checkbtn {width: 120px;transition: color .2s;
    &.on {color: #00c8f1;}
  }
  .el-button--primary {width: 120px;}
}
</style>
